<template>
    <div class="container">
        <div class="opt-area-02">
            <div class="left-con">
                上报总数: <span>{{countData.gjnum}} 条</span> |
                待分配数量:<span>{{countData.dfpNum}} 条</span>
                已分配数量: <span>{{countData.yfpNum}} 条</span> |
                已交接数量: <span>{{countData.yjsNum}} 条</span> |
            </div>
            <div class="right-con">
                <div class="input-frame">
                    <Select v-model="params.state" style="width:200px" @on-change="selectlist">
                        <Option value="">全部</Option>
                        <Option value="1">待分配</Option>
                        <Option value="2">待交接</Option>
                        <Option value="3">已交接</Option>
                    </Select>
                </div>
                <div class="input-frame">
                    <Input type="text" @on-click="selectlist()" placeholder="输入企业名称" v-model="params.work_name"
                           icon="ios-search"/>
                </div>
            </div>
        </div>

        <Table :loading="countData.loading" border :columns="columns2" :data="fcDataList" size="small">
            <template slot-scope="{ row }" slot="state">
                <div v-if="row.state==='1'">待分配</div>
                <div v-if="row.state==='2'">待交接</div>
                <div v-if="row.state==='3'">已交接</div>
            </template>
            <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="info" size="small" @click="detail(row)">详情</Button>
                <Button v-if="row.state==='1'" class="table-action-btn" type="success" size="small" @click="allocation(row)">分配流水号</Button>
                <Button v-if="row.state==='2'" class="table-action-btn" type="success" size="small" @click="reception(row)">接收档案</Button>
            </template>
        </Table>
        <Row type="flex" justify="end" class="page_style">
            <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                  show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
        <Modal
                v-model="allocationModal"
                title="分配流水号"
                @on-ok="allocationok">
            <p>转送档案数量：<span style="font-size: 20px;margin-left: 5px">{{this.row.people_num}}</span></p>
            <p style="margin-top: 10px">
                请仔细输入流水号:
                <template>
                    <Input v-model="Zimu" style="width: 35px;margin: 0 10px" />
                </template>
                <template>
                    <Input v-model="Num1" style="width: 100px;margin: 0 10px" />
                </template>
                <Icon type="md-arrow-forward" />
                <template>
                    <Input v-model="Num2" style="width: 100px;margin: 0 10px" disabled/>
                </template>
            </p>
        </Modal>
        <Modal
                v-model="receptionModal"
                title="接收档案"
                @on-ok="receptionok">
            <p>
                请仔细核查信息！确认操作！
            </p>
        </Modal>
        <Modal
                width="1100"
                v-model="detailmodal1"
                title="转送档案列表">
            <detail-modal ref="getlist" :recordId="detailRow.record_id"></detail-modal>
        </Modal>

    </div>
</template>

<script>
import { getRecordConnectionList, updateSerialNum,
  updateRecordState, getRecordJSNum } from '@/api/record'
import DetailModal from './components/detail-modal/index'
export default {
  components: {
    DetailModal
  },
  data () {
    return {
      Zimu: '',
      Num1: '',
      Num2: '',
      allocationModal: false,
      receptionModal: false,
      detailmodal1: false,
      row: {},
      countData: { loading: true, gjnum: 0, dfpNum: 0, yfpNum: 0, yjsNum: 0 },
      params: { work_name: '', type: '', pageNo: 1, pageSize: 10, totalRecord: 0, state: '' },
      columns2: [
        { title: '企业名称', key: 'work_name', align: 'center' },
        { title: '上报人数', key: 'people_num', align: 'center' },
        { title: '上报状态', slot: 'state', align: 'center' },
        { title: '上报时间', key: 'create_time', align: 'center' },
        { title: '操作', align: 'center', width: 250, slot: 'action', fixed: 'right' }
      ],
      fcDataList: [],
      detailRow: []
    }
  },
  methods: {
    getRecordJSNum () {
      getRecordJSNum().then(ret => {
        if (ret.data.errcode === 0) {
          this.countData.gjnum = ret.data.data.gjNum
          this.countData.dfpNum = ret.data.data.dfpNum
          this.countData.yfpNum = ret.data.data.yfpNum
          this.countData.yjsNum = ret.data.data.yjsNum
        }
      })
    },
    detail (row) {
      this.detailRow = row
      this.detailmodal1 = true
      this.$refs.getlist.selectlist()
    },
    receptionok () {
      updateRecordState(this.row).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success(ret.data.errmsg)
          this.getList()
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    reception (row) {
      this.row = row
      this.receptionModal = true
    },
    allocationok () {
      var nubmer = this.Num1
      if (isNaN(nubmer) || nubmer <= 0 || !(/^[1-9]\d*$/.test(nubmer))) {
        this.$Message.info('请输入正确的流水号，不能以0开始！')
        this.Num1 = ''
        this.Num2 = ''
      } else {
        let data = {
          Zimu: this.Zimu,
          beginNum: this.Num1,
          endNum: this.Num2,
          id: this.row.id,
          record_id: this.row.record_id
        }
        updateSerialNum(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Message.success(ret.data.errmsg)
            this.getList()
          } else {
            this.$Message.error(ret.data.errmsg)
          }
        })
      }
    },
    allocation (row) {
      this.allocationModal = true
      this.row = row
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    selectlist () {
      this.params.pageNo = 1
      this.params.type = this.type
      this.getList()
    },
    getList () {
      getRecordConnectionList(this.params).then(res => {
        let result = res.data.data
        if (res.data.errcode === 0 || res.data.errcode === 1001) {
          this.getRecordJSNum()
          this.fcDataList = res.data.data.results
          this.params.pageNo = result.pageNo
          this.params.pageSize = result.pageSize
          this.params.totalPage = result.totalPage
          this.params.totalRecord = result.totalRecord
          this.countData.loading = false
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    }

  },
  mounted () {
    this.selectlist()
  },
  watch: {
    Num1 (value) {
      this.Num2 = parseInt(value) + parseInt(this.row.people_num)
    }
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
</style>
